<template>
  <div>
    <div class="wzdetails-main">
      <!-- 页头 -->
      <div class="wzhead">
        <span onclick="window.history.go(-1);">
          <img src="../assets/img/返回箭头 (1).png" alt="" />
        </span>

        <router to="">基金详情</router>
        <router to="">
          <img src="../assets/img/004耳机-2.png" alt="" />
        </router>
      </div>
      <!-- 基金详情选项 -->
      <div class="wzdetails1">
        <div class="wzdetails1-1">基金解读</div>
        <div class="wzdetails1-2">基金详情</div>
      </div>
      <!-- 基金块 -->
      <div class="wzpiece" id="wzpiece1">
        <p class="wzpiece1">{{ this.RenderPage.fundName }}</p>
        <p class="wzpiece2">暂停申赎</p>
        <div class="wzpiece3">
          <div class="wzpiece3-1">
            <p class="wzpiece3-11">{{ this.RenderPage.price }}万元</p>
            <p class="wzpiece3-12">最新净值(05-05)</p>
          </div>
          <div class="wzpiece3-2">
            <p class="wzpiece3-21">+4.12%</p>
            <p class="wzpiece3-22">日涨跌幅</p>
          </div>
          <div class="wzpiece3-3">
            <p class="wzpiece3-31">{{ this.RenderPage.yearRate }}%</p>
            <p class="wzpiece3-32">近一年收益</p>
          </div>
        </div>
      </div>
      <!-- 类型 -->
      <div class="wztype">
        <div class="wztype1">R4</div>
        <div class="wztype2">中高风险</div>
        <div class="wztype3">混合型</div>
        <div class="wztype4"><span>--</span> 元起购</div>
      </div>
      <!-- 购买框 -->
      <div class="wzbuy">
        <div class="wzbuy1">
          <p class="wzbuy1-1">
            <img src="../assets/img/星,星星,星形,半星,实星.png" alt="" />
          </p>
          <p class="wzbuy1-2">自选</p>
        </div>
        <div class="wzbuy2">
          <p class="wzbuy1-1">PK</p>
          <p class="wzbuy1-2">比较</p>
        </div>
        <div class="wzbuy3">
          <p class="wzbuy1-1">
            <img src="../assets/img/圆形选中.png" alt="" />
          </p>
          <p class="wzbuy1-2">定投模拟</p>
        </div>
        <div class="wzbuy4" @click="plan">定投</div>
        <div class="wzbuy5" @click="show = true">购买</div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <div id="wzlow">
        <div class="wzverificationCode">
          <div class="wzverificationCode-head">
            <img
              src="../assets/img/错误2.png"
              alt=""
              width="20px"
              height="20px"
              id="wrong"
            />
            <p>请输入您要购买的份数</p>
          </div>
          <div class="wzverificationCode-center">
            <input
              type="text"
              placeholder="       请输入购买的份数"
              id="wzsix1"
              v-model="copies"
            />
          </div>
          <div class="wzverificationCode-top">
            <button id="wzaffirm" @click="buy()">确定</button>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { funddetails, particulars } from "../api/funddetails";
export default {
  data() {
    return {
      copies: "",
      buyfund: [],
      RenderPage: [],
      show: false,
    };
  },
  created() {
    this.wash();
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    //渲染页面
    wash() {
      let cc = { fundNo: this.$route.query.fundNo };
      particulars(cc)
        .then((res) => {
          this.RenderPage = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //购买基金
    buy() {
      let buy1 = {
        fundNo: this.$route.query.fundNo,
        fund_number: this.copies,
      };
      funddetails(buy1)
        .then((res) => {
          if (res.code == 200) {
            this.buyfund = res.data;
            Dialog({ title: "通知", message: res.data });
            this.show = false;
          } else {
            Dialog({ title: "温馨提示", message: res.msg });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    plan() {
      this.$router.push({
        name: "OrdinaryInvestment",
        params: {
          fundname: this.RenderPage.fundName,
        },
      });
    },
    //
  },
};
</script>

<style>
a {
  text-decoration: none;
}
.wzdetails-main {
  width: 390px;
  height: 800px;
}
.wzhead {
  width: 390px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  line-height: 40px;
}
.wzhead-1 img {
  width: 20px;
  height: 20px;
  margin-left: -1px;
}
.wzhead img {
  width: 20px;
  height: 20px;
  margin-right: 13px;
  margin-top: 15px;
}
.wzhead a {
  color: black;
  font-size: 18px;
  font-weight: 600;
}
.wzhead a:nth-child(1) {
  margin-left: 20px;
}
.wzdetails1 {
  width: 390px;
  height: 50px;
  border-bottom: 1px solid rgba(198, 198, 198, 0.71);
  display: flex;
  justify-content: space-between;
}
.wzdetails1-1,
.wzdetails1-2 {
  width: 195px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.wzdetails1-2 {
  color: rgb(11, 177, 100);
  border-bottom: 2px solid rgb(11, 177, 100);
}
.wzpiece {
  text-align: center;
  border-bottom: 1px solid rgba(198, 198, 198, 0.71);
}
.wzpiece1 {
  margin-top: 20px;
}
.wzpiece2 {
  width: 60px;
  height: 20px;
  color: rgba(255, 166, 0, 0.674);
  font-size: 14px;
  border: 1px solid rgba(255, 166, 0, 0.674);
  margin-left: 160px;
  margin-top: 10px;
}
.wzpiece3 {
  width: 390px;
  display: flex;
  margin-top: 20px;
}
.wzpiece3-1,
.wzpiece3-2,
.wzpiece3-3 {
  width: 130px;
  height: 70px;
}
.wzpiece3-11 {
  font-weight: 600;
  font-size: 20px;
}
.wzpiece3-12,
.wzpiece3-22,
.wzpiece3-32 {
  font-size: 14px;
  color: rgb(138, 138, 138);
}
.wzpiece3-21,
.wzpiece3-31 {
  font-weight: 600;
  font-size: 20px;
  color: red;
}
.wztype {
  width: 390px;
  height: 20px;
  display: flex;
  margin-top: 10px;
}
.wztype1 {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 166, 0, 0.674);
  border-radius: 50%;
  font-size: 12px;
  color: rgba(255, 166, 0, 0.674);
  line-height: 20px;
  text-align: center;
}
.wztype2,
.type3,
.type4 {
  font-size: 14px;
  margin: 0 10px;
}
.wzbuy {
  width: 390px;
  height: 50px;
  display: flex;
  position: fixed;
  bottom: 0px;
}
.wzbuy1,
.wzbuy2,
.wzbuy3 {
  width: 65px;
  height: 50px;
  text-align: center;
}
.wzbuy1-1 {
  font-size: 12px;
  margin-top: 8px;
}
.wzbuy1-1 img {
  width: 10px;
  height: 10px;
}
.wzbuy1-2 {
  font-size: 10px;
  /* margin-top: 8px; */
}
.wzbuy4,
.wzbuy5 {
  width: 97.5px;
  height: 50px;
  background-color: rgba(255, 166, 0, 0.674);
  color: white;
  text-align: center;
  line-height: 50px;
}
.wzbuy5 {
  border-left: 1px solid white;
}
.wzverificationCode {
  height: 170px;
  width: 390px;
  background-color: white;
  position: absolute;
  bottom: 0px;
  padding: 2px 5px;
  margin-bottom: 140px;
  /* display: none; */
}
.wzverificationCode-head {
  display: flex;
  height: 20px;
  margin: 10px 10px;
  font-size: 19px;
  text-align: center;
  position: relative;
}
.wzverificationCode-head p {
  position: absolute;
  right: 140px;
}
.wzverificationCode-center {
  height: 50px;
  border-top: 1px solid #c0c0c0;
  border-bottom: 1px solid #c0c0c0;
  display: flex;
  justify-content: space-evenly;
  line-height: 50px;
  font-size: 17px;
  margin-top: 60px;
}
#wzsix1 {
  border: 0;
  outline: none;
  height: 40px;
  margin-top: 5px;
}
#wzgain {
  border-left: 1px solid #c0c0c0;
  padding-left: 10px;
  color: #f0c61a;
}
.wzverificationCode-top {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 80px;
  margin-top: 75px;
}
#wzaffirm {
  height: 40px;
  width: 370px;
  background-color: #ed912152;
  border: 0;
  border-radius: 5px;
  color: white;
  font-size: 20px;
}
#wzphone {
  color: #808a87;
}
#wzlow {
  width: 100%;
  /* height: 100px; */
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  bottom: 0;
  z-index: 22;
}
</style>
